<!DOCTYPE HTML>
<html>
{include file="public:header_css"}
<body>
<div class="page-container">
    <div action="" method="post" class="form form-horizontal" id="form-shops-add" enctype="multipart/form-data">
        <div class="row cl">
            <div style="margin-left: 50px;">
                <div  style="margin-left: 80px;margin-top: 20px;">
                    <input type="checkbox" id="CheckWorkday" value="" onclick="checkboxOnclick(this)"/>&nbsp;工作日&nbsp;&nbsp;&nbsp;
                    <input type="checkbox" id="CheckWeekend" value="" onclick="checkboxOnclick(this)"/>&nbsp;周末&nbsp;&nbsp;&nbsp;
                </div>
                <div style="margin-left: 45px;">星期</div>
                <div  style="margin-left: 80px;">
                    <input type="checkbox" name="items" value="1" id="Monday"/>星期一&nbsp;&nbsp;&nbsp;
                    <input type="checkbox" name="items" value="2" id="Tuesday"/>星期二&nbsp;&nbsp;&nbsp;
                    <input type="checkbox" name="items" value="3" id="Wednesday"/>星期三&nbsp;&nbsp;&nbsp;
                    <input type="checkbox" name="items" value="4" id="Thursday"/>星期四&nbsp;&nbsp;&nbsp;
                    <input type="checkbox" name="items" value="5" id="Friday"/>星期五&nbsp;&nbsp;&nbsp;
                    <input type="checkbox" name="items" value="6" id="Saturday" />星期六&nbsp;&nbsp;&nbsp;
                    <input type="checkbox" name="items" value="0" id="Sunday"/>星期日&nbsp;&nbsp;&nbsp;
                    <input type="button" value="&nbsp;点击确定&nbsp;" id="xuan" style="width: 80px;height: 25px;background-color: #5a98de;color: white;border: none">
                </div>
            </div>
        </div>
        <div class="mt-20">
            <table class="table table-border table-bordered table-bg table-sort">
                <thead>
                <tr class="text-c">
                    <th width="60">星期</th>
                    <th width="150">时段</th>
                    <th width="100">课程名称</th>
                    <th width="100">选择教师</th>
                    <th width="100">具体班级</th>
                    <th width="100">操作</th>
                </tr>
                </thead>
                <tbody id="arrangeList">
                {foreach name="week_arr" item="val" key="key"}
                <tr class="text-c" id="xq{$key}">
                    <td id="xqname{$key}">{$val}</td>
                    <td>
                        <select style="border: none;" id="time{$key}">
                            {foreach name="period_list" item="v" key="k"}
                            <option value="{$v['id']}">{$v['time']}</option>
                            {/foreach}
                        </select>
                    </td>
                    <td>{$course_info['course_name']}</td>
                    <td>
                        <select style="border: none;" id="teacher{$key}">
                            {foreach name="teacher_list" item="v" key="k"}
                            <option value="{$v['teacher_id']}">{$v['teacher_name']}</option>
                            {/foreach}
                        </select>
                    </td>
                    <td>
                        <select style="border: none;" id="class{$key}">
                            {foreach name="classes_list" item="v" key="k"}
                            <option value="{$v['class_id']}">{$v['class_name']}</option>
                            {/foreach}
                        </select>
                    </td>
                    <td>
                        <input class="btn btn-primary radius" type="button" id="tianjia" onclick="add_time('{$key}')" value="&nbsp;&nbsp;添加&nbsp;&nbsp;">
                    </td>
                </tr>
                {/foreach}
                </tbody>
            </table>
        </div>

        <div class="row cl">
            <div class="col-xs-8 col-sm-9 col-xs-offset-6 col-sm-offset-5" style="margin-top: 20px">
                <input type="hidden" value="{$course_info['course_id']}" id="course_id">
                <input type="hidden" value="{$stu_id}" id="stu_id">
                <button class="btn btn-primary radius" type="submit" id="submit">&nbsp;&nbsp;提交&nbsp;&nbsp;</button>
                <a class="btn btn-warning radius"  onclick="cancel()">&nbsp;&nbsp;取消&nbsp;&nbsp;</a>
            </div>
        </div>

    </div>
</div>

{include file="public:footer_js"}

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="__STATIC__/admin/lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="__STATIC__/admin/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="__STATIC__/admin/lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript" src="__STATIC__/admin/lib/laypage/1.2/laypage.js"></script>

<script type="text/javascript">

    //默认先不展示列表
    $(function(){
        for (var i=0;i<7;i++){
            $("#xq"+i).hide();
        }
    });

    //选中的时间的方法
    function check(start,end,flag) {
        for (var i=start;i<end;i++) {
            $('input:checkbox').eq(i).prop('checked',flag);
        }
    }
    function checkboxOnclick(checkbox){
        if (checkbox.id == 'CheckWorkday') {
            if ( checkbox.checked == true){
                check(2,7,true);
            }else{
                check(2,7,false);
            }
        }else if(checkbox.id == 'CheckWeekend'){
            if ( checkbox.checked == true){
                check(7,9,true);
            }else{
                check(7,9,false);
            }
        }
    }

    //获取选中复选框的值
    $("#xuan").click(function(){
        //每次请求都先清除
        for (var i=0;i<7;i++){
            $("#xq"+i).hide();
        }
        //监听按钮
        $.each($('input:checkbox'),function(){
            if(this.checked){
                $("#xq"+$(this).val()).show();
            }
        });
    });

    //定义全局变量
    var temp_time = [];
    var arrange_time = [];
    //添加元素
    function add_time(id) {
        //星期几id
        var week_day = id;
        //星期几文字
        var xqname = $("#xqname"+id).text();

        //时间段的id
        var time_id = $("#time"+id).val();
        //时间段的具体数据
        var timename = $('#time'+id).find("option:selected").text();

        //班级的id
        var class_id = $("#class" + id).val();
        //选择班级数据
        var class_name = $('#class' + id).find("option:selected").text();

        //教师的id
        var teacher_id = $("#teacher" + id).val();
        //选择班级数据
        var teacher_name = $('#teacher' + id).find("option:selected").text();

        //拼接星期和时间段,进行本页面的比对是否重复添加相同时间
        var arrange_item = week_day+"&"+time_id;

        if (($.inArray(arrange_item,temp_time))!=-1){
            layer.msg('该课程本时间段已排~',{icon:6,time:2000});
            return;
        }else {
            //数组添加元素
            temp_time.push(arrange_item);
            arrange_item=arrange_item+"&"+class_id+"&"+teacher_id;
            //该班级没有被占用
            arrange_time.push(arrange_item);
            $("#xq"+id).after("<tr class=\"text-c\" >" +
                "<td>"+xqname+"</td>" +
                "<td>"+timename+"</td>" +
                "<td>~</td>" +
                "<td>"+teacher_name+"</td>" +
                "<td>"+class_name+"</td>" +
                "<td>"+"<button class=\" remove btn btn-primary radius\" id=\"+arrange_item+\" value="+temp_time+"  onclick='remove(this)'>&nbsp;&nbsp;移除&nbsp;&nbsp;</button>" + "</td>" +
                "</tr>");
            layer.msg('添加成功！',{icon:6,time:1000});
        }


    }

    //异步提交
    $("#submit").click(function(){

        //判断是否有需要添加的数据
        if ($.trim($(".remove").val()).length>0){
            var course_id   = $("#course_id").val();
            var stu_id      = $("#stu_id").val();
            //异步提交
            $.ajax({
                type:"POST",
                url:"{:url('add_one')}",
                data:{
                    course_id      : course_id,
                    stu_id         : stu_id,
                    arrange_time   : JSON.stringify(arrange_time)
                },
                async:true,
                success:function (res) {
                    if(res.code === 0){
                        layer.msg(res.msg,{icon:5,time:2000});
                    }else{
                        layer.msg(res.msg,{icon:6,time:2000});
                        // 定时跳转页面
                        setTimeout(
                            function(){
                                parent.location.href = "{:url('student_arrange/index')}"+"?stu_id="+res.data;
                            },
                            3000);
                    }
                }
            });

        }else {
            layer.alert('您还没有添加任何课程哦~', {icon: 6});
        }
    });

    //移除元素
    function remove(obj) {
        layer.confirm('确定移除吗？', function(){
            temp_time.splice($.inArray(obj.value,temp_time),1);
            arrange_time.splice($.inArray(obj.id,arrange_time),1);
            var tr =obj.parentNode.parentNode;
            var tbody= tr.parentNode;
            tbody.removeChild(tr);
            layer.msg('移除成功！',{icon:6,time:1000});
        });
    }

    //取消本次保存操作
    function cancel(){
        layer.open({
            title: ['温馨提示'],
            content: '<div style="color:black">确定取消本次操作吗？</div>',
            btn: ['确定', '取消'],
            yes: function(index, layero){
                parent.location.href = "{:url('student_arrange/add')}"+"?stu_id="+{$stu_id};
            },
            cancel: function(index,layero){
            },

        });
    }


</script>
</body>
</html>